<template>
  <div>
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="type"
                       label="类型"
                       sortable
                       width="100">
        <template slot-scope="scope">
          {{ questiontype(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="subject"
                       label="科目"
                       sortable
                       width="100">
        <template slot-scope="scope">
          {{ subjecttype(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="context"
                       label="问题描述"
                       sortable
                       width="200"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="upload_time"
                       label="上传时间"
                       sortable
                       width="112"
                       show-overflow-tooltip><template slot-scope="scope">
          {{ new Date(scope.row.upload_time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="answer"
                       label="老师回复"
                       sortable
                       width="120"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          {{ isanswer(scope.row.answer) }}
        </template>
      </el-table-column>
      <el-table-column prop="recovery_tea"
                       label="解答老师"
                       sortable
                       width="120">
      </el-table-column>
      <el-table-column prop="recovery_time"
                       label="回复时间"
                       sortable
                       width="112"
                       show-overflow-tooltip><template slot-scope="scope">
          {{ new Date(scope.row.recovery_time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.row)"
                     type="text"
                     lock-scroll>
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination @next-click="next"
                   @prev-click="prev"
                   :current-page="currentPage"
                   :page-sizes="[8]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next"
                   :total="total">
    </el-pagination>

    <!-- 点击查看详情的弹出框 -->
    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="70%">
      <h4>问题</h4>
      <span>{{ question }}</span>
      <el-divider></el-divider>
      <h4>老师回复</h4>
      <h3>{{ answer }}</h3>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data () {
    return {
      uid: 0,
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [], //总的集合
      dialogVisible: false,
      question: "",
      answer: "",
      type_question: ["选择题", "填空题", "解答题", "作文题"],
      type_subject: [
        "语文",
        "数学",
        "英语",
        "政治",
        "历史",
        "地理",
        "物理",
        "化学",
        "生物"
      ]
    };
  },
  methods: {
    findAllQuestion () {
      axios
        .get(
          commons.baseUrl +
          "student/findAllQuestion?page=" +
          this.currentPage +
          "&size=" +
          this.size
        )
        .then(res => {
          console.log(res.data);
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
    questiontype (type) {
      return this.type_question[type - 1];
    },
    subjecttype (subject) {
      return this.type_subject[subject - 1];
    },
    isanswer (answer) {
      if (answer == null || answer == "") {
        return "未回复";
      } else {
        return answer;
      }
    },

    //下一页
    next () {
      this.currentPage = this.currentPage + 1;
      this.findAllQuestion();
    },

    //上一页
    prev () {
      this.currentPage = this.currentPage - 1;
      this.findAllQuestion();
    },
    deleteRow (row) {
      this.dialogVisible = true;
      this.question = row.context;
      this.answer = row.answer;
    }
  },
  //生命周期函数,在页面创建成功时回调
  mounted () {
    this.findAllQuestion();
  }
};
</script>
<style scoped></style>
